<template>
  <div class="feedback-container">
    <van-nav-bar
      title="意见反馈"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="feedback-form">
      <!-- 反馈类型 -->
      <van-field
        v-model="formData.type"
        label="反馈类型"
        placeholder="请选择反馈类型"
        readonly
        is-link
        @click="showTypePopup = true"
      />
      <van-popup
        v-model:show="showTypePopup"
        position="bottom"
        round
      >
        <van-picker
          :columns="feedbackTypes"
          @confirm="onTypeConfirm"
          @cancel="showTypePopup = false"
        />
      </van-popup>

      <!-- 反馈内容 -->
      <van-field
        v-model="formData.content"
        label="反馈内容"
        type="textarea"
        placeholder="请详细描述您的问题或建议"
        :rules="[{ required: true, message: '请填写反馈内容' }]"
        :autosize="{ minHeight: 100, maxHeight: 200 }"
      />

      <!-- 图片上传 -->
      <div class="upload-section">
        <div class="upload-title">图片（选填）</div>
        <van-uploader
          v-model="formData.images"
          :max-count="3"
          :after-read="afterRead"
          @delete="onDeleteImage"
        >
          <template #preview-cover="{ file }">
            <div class="preview-cover">
              <van-loading v-if="file.status === 'uploading'" type="spinner" size="20" />
              <van-icon v-else-if="file.status === 'failed'" name="close" />
            </div>
          </template>
        </van-uploader>
        <div class="upload-tip">最多上传3张图片，每张不超过5M</div>
      </div>

      <!-- 联系方式 -->
      <van-field
        v-model="formData.contact"
        label="联系方式"
        placeholder="请留下您的手机号或邮箱（选填）"
      />

      <!-- 提交按钮 -->
      <div class="submit-btn">
        <van-button
          round
          block
          type="primary"
          :disabled="!formData.type || !formData.content"
          @click="onSubmit"
        >
          提交反馈
        </van-button>
      </div>

      <!-- 反馈记录 -->
      <div class="feedback-history">
        <div class="history-title">反馈记录</div>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="item in historyList" :key="item.id" class="history-item">
            <div class="history-header">
              <span class="history-type">{{ item.type }}</span>
              <span class="history-status" :class="item.statusClass">{{ item.statusText }}</span>
            </div>
            <div class="history-content">{{ item.content }}</div>
            <div class="history-footer">
              <span class="history-time">{{ item.time }}</span>
              <van-button
                v-if="item.status === 'replied'"
                size="small"
                plain
                type="primary"
                @click="viewReply(item)"
              >
                查看回复
              </van-button>
            </div>
          </div>
        </van-list>
      </div>
    </div>

    <!-- 回复详情弹窗 -->
    <van-dialog
      v-model:show="showReplyDialog"
      title="回复详情"
      :showConfirmButton="false"
    >
      <div class="reply-content" v-if="currentReply">
        <div class="reply-item">
          <div class="reply-header">
            <span class="reply-label">反馈内容：</span>
            <span class="reply-time">{{ currentReply.time }}</span>
          </div>
          <div class="reply-text">{{ currentReply.content }}</div>
        </div>
        <div class="reply-item">
          <div class="reply-header">
            <span class="reply-label">客服回复：</span>
            <span class="reply-time">{{ currentReply.replyTime }}</span>
          </div>
          <div class="reply-text">{{ currentReply.replyContent }}</div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'

const router = useRouter()

// 表单数据
const formData = ref({
  type: '',
  content: '',
  images: [],
  contact: ''
})

// 反馈类型
const feedbackTypes = [
  '功能异常',
  '体验问题',
  '内容建议',
  '其他问题'
]

// 弹窗控制
const showTypePopup = ref(false)
const showReplyDialog = ref(false)

// 列表状态
const loading = ref(false)
const finished = ref(false)
const historyList = ref([])
const currentReply = ref(null)

// 模拟历史记录数据
const mockHistory = [
  {
    id: 1,
    type: '功能异常',
    content: '视频播放时经常卡顿，影响学习体验',
    time: '2023-08-01 15:30',
    status: 'replied',
    statusText: '已回复',
    statusClass: 'status-replied',
    reply: {
      content: '视频播放时经常卡顿，影响学习体验',
      time: '2023-08-01 15:30',
      replyContent: '您好，我们已经收到您的反馈。经检查是由于CDN节点配置问题导致的，现已修复，请您重新尝试。如果问题仍然存在，请及时联系我们。',
      replyTime: '2023-08-01 16:00'
    }
  },
  {
    id: 2,
    type: '内容建议',
    content: '建议增加更多的实战项目案例',
    time: '2023-07-31 10:20',
    status: 'processing',
    statusText: '处理中',
    statusClass: 'status-processing'
  },
  {
    id: 3,
    type: '其他问题',
    content: '如何申请课程退款？',
    time: '2023-07-30 14:15',
    status: 'replied',
    statusText: '已回复',
    statusClass: 'status-replied',
    reply: {
      content: '如何申请课程退款？',
      time: '2023-07-30 14:15',
      replyContent: '您好，根据平台规定，未学习的课程可以在购买后7天内申请退款。请您在"我的订单"中找到相应课程，点击"申请退款"按钮进行操作。如有疑问，可以联系在线客服。',
      replyTime: '2023-07-30 14:45'
    }
  }
]

// 选择反馈类型
const onTypeConfirm = (value) => {
  formData.value.type = value
  showTypePopup.value = false
}

// 上传图片后的回调
const afterRead = (file) => {
  file.status = 'uploading'
  file.message = '上传中...'

  // 模拟上传
  setTimeout(() => {
    file.status = 'done'
    file.message = ''
  }, 1000)
}

// 删除图片
const onDeleteImage = (file) => {
  const index = formData.value.images.indexOf(file)
  if (index !== -1) {
    formData.value.images.splice(index, 1)
  }
}

// 提交反馈
const onSubmit = () => {
  // TODO: 调用提交接口
  showToast('提交成功')
  // 重置表单
  formData.value = {
    type: '',
    content: '',
    images: [],
    contact: ''
  }
}

// 加载历史记录
const onLoad = () => {
  setTimeout(() => {
    historyList.value.push(...mockHistory)
    loading.value = false
    finished.value = true
  }, 1000)
}

// 查看回复
const viewReply = (item) => {
  currentReply.value = item.reply
  showReplyDialog.value = true
}

// 返回上一页
const onClickLeft = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
.feedback-container {
  min-height: 100vh;
  background-color: #f7f8fa;

  .feedback-form {
    padding: 12px;

    .upload-section {
      padding: 12px 16px;
      background: #fff;
      margin: 12px 0;

      .upload-title {
        font-size: 14px;
        color: #646566;
        margin-bottom: 8px;
      }

      .upload-tip {
        font-size: 12px;
        color: #969799;
        margin-top: 8px;
      }
    }

    .preview-cover {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.3);
      color: #fff;
    }

    .submit-btn {
      margin: 24px 0;
    }
  }

  .feedback-history {
    background: #fff;
    padding: 16px;

    .history-title {
      font-size: 15px;
      font-weight: 500;
      color: #323233;
      margin-bottom: 12px;
    }

    .history-item {
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .history-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;

        .history-type {
          font-size: 14px;
          font-weight: 500;
          color: #323233;
        }

        .history-status {
          font-size: 12px;

          &.status-replied {
            color: #07c160;
          }

          &.status-processing {
            color: #ff976a;
          }
        }
      }

      .history-content {
        font-size: 13px;
        color: #646566;
        margin-bottom: 8px;
      }

      .history-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .history-time {
          font-size: 12px;
          color: #969799;
        }
      }
    }
  }
}

.reply-content {
  padding: 16px;

  .reply-item {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }

    .reply-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .reply-label {
        font-size: 14px;
        font-weight: 500;
        color: #323233;
      }

      .reply-time {
        font-size: 12px;
        color: #969799;
      }
    }

    .reply-text {
      font-size: 13px;
      color: #646566;
      line-height: 1.5;
    }
  }
}
</style>
